Skip to main content Skip to Table of Contents
U.S. flag

An official website of the United States government

Baseline for Web

6. Images

Accessibility Requirements

  • WCAG2 SC: 1.1.1. Non-Text – All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for [specific] situations.
  • WCAG2 SC: 1.4.5 Images of Text – If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for [specific situations].
  • WCAG2 SC: 4.1.2 Name, Role, Value – For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Test Method Rationale

  • The image tests evaluate the images as coded to discern whether the author of the content has determined they are meaningful or decorative. However, there are certain scenarios, as described in the tests, where the author’s programmatic determination could be incorrect.
  • The tests include guidance from the W3C Web Accessiblity Initiative Images Tutorial.
  • All images must be evaluated. Multiple tests may apply to an image.

Limitations, Assumptions, Exceptions

  • An image that has a non-empty accessible name has been determined to be meaningful by the content author. The author has decided that this image should not be ignored by assistive technology.
  • An image that has an empty accessible name has been determined to be decorative by the content author. The author has determined that this image should be ignored by assistive technology.
  • Use of role="presentation" or role="none" on an image with other attributes or roles can cause conflicts. This Baseline tests for these conflicts because Presentational Roles Conflicts Resolution has inconsistent accessibility support and may result in inaccessible content.
    • “If an element with a role of presentation is focusable, or otherwise interactive, user agents MUST ignore the normal effect of the role and expose the element with implicit native semantics, in order to ensure that the element is both understandable and operable.”
      • Because accessibility support is inconsistent, this Baseline checks that an image with an empty text alternative is not in the tab order nor a functional image.
    • “User agents MUST always expose global WAI-ARIA states and properties to accessibility APIs, even if an element has an explicit or inherited role of presentation. In this case, the user agent ignores the presentation role and exposes the element according to its implicit native semantics.”
      • “Authors SHOULD NOT provide meaningful alternative text (for example, use alt="" in HTML) when the presentation role is applied to an image.” WAI-ARIA 1.1, presentation (role).
      • Because accessibility support is inconsistent, this Baseline checks that an image that has role="presentation" or role="none" does not have a non-empty text alternative attribute, and an image that has a non-empty text alternative does not have role="presentation" or role="none".
  • Commonly used image formats include .jpg, .png, .svg, .gif, .tiff, and .bmp. Other graphic formats are also in use and should be considered for this test.
  • Decoration, Formatting, Invisible: If the image is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
  • CAPTCHA: If the purpose of the image is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the image(s) are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • Images of text which are essential to the information being conveyed are exempt from SC 1.4.5. Logotypes (text that is part of a logo or brand name) are considered essential.
  • The definition of image of text contains the note: “Note: This does not include text that is part of a picture that contains significant other visual content.” Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text.
  • The WCAG 2.0 Sufficient Technique H45: Using longdesc is not supported by the Baseline for Web and is not part of the accessible name or accessible description computation for an image. WCAG 2.2 also does not have a sufficient technique for longdesc.
  • The combination of an element’s accessible name and accessible description is its text alternative.

6.A Test Procedure for Images with a non-empty text alternative

Baseline Test ID: 6.A-MeaningfulImage

Identify Content

Identify any image (i.e., img element or an element with role="img") that has a non-empty text alternative (combination of the accessible name and accessible description) per the HTML Accessibility API Mappings 1.0 for img.

Test Instructions
  1. Check that none of the following is true [SC 1.1.1]:
    1. The image is page design/formatting and could be ignored by assistive technology without any loss of meaning.
    2. The image is not visible on the page.
  2. Check that the ARIA role is NOT "presentation".[SC 4.1.2]
  3. Check that the ARIA role is NOT "none".[SC 4.1.2]
  4. Check that the non-empty text alternative (combination of accessible name and accessible description) provides an equivalent description of the image's purpose. [SC 1.1.1]
Test Results

If any of the above checks fail, then Baseline Test 6.A-MeaningfulImage fails.

6.B Test Procedure for Images with an empty text alternative

Baseline Test ID: 6.B-DecorativeImage

Identify Content

Identify any image (i.e., img element, or element with role="img", or element that includes a CSS background image) that has an empty text alternative.

Test Instructions
  1. Check that the empty text alternative has been programmatically assigned using one of the following techniques [SC 1.1.1]:
    1. The ARIA role is "presentation".
    2. The ARIA role is "none".
    3. The aria-hidden is set to "true".
    4. The attribute alt="".
    5. The image is inserted via CSS (i.e., a background image).
    Note: If the image does not have any of these attributes, this would be a failure.
  2. Check that none of the following is true [SC 1.1.1]:
    1. The image is the only way to convey meaningful information.
    2. The image is in the tab order.
    3. The image is a functional image that initiates action.
  3. For images with role="presentation" or role="none", check that there are no non-empty text alternative attributes. The presence of such attributes may cause assistive technology to not ignore the image, i.e., provide the image's text alternative to the user. [SC 1.1.1]
    • Fail Example 1: <img role="none" alt="use your notes">
    • Fail Example 2: <img aria-label="turtle" role="presentation">
Test Results

If any of the above checks fail, then Baseline Test 6.B-DecorativeImage fails.

6.C Test Procedure for Captchas

Baseline Test ID: 6.C-Captcha

Identify Content

Identify any CAPTCHA designed to determine if content is being accessed by a person rather than a computer.

Test Instructions
  1. Check that the text alternative (combination of the accessible name and accessible description) is not empty. [SC 1.1.1]
  2. Check that the non-empty text alternative (combination of accessible name and accessible description) identifies and describes the purpose of the CAPTCHA. [SC 1.1.1]
  3. Check that alternative forms of CAPTCHA are provided, at a minimum, for users without vision and users without hearing. [SC 1.1.1]
Test Results

If any of the above checks fail, then Baseline Test 6.C-Captcha fails.

6.D Test Procedure for Images of Text

Baseline Test ID: 6.D-ImageText

Identify Content

Identify any images of text, except where a particular presentation of text is essential to the information being conveyed (e.g., logotypes or text that is part of a logo or brand name).

Test Instructions

  1. Check that using text cannot achieve the same visual presentation and effect as images of text. [SC 1.4.5]
  2. Check that the image of text can be visually customized to a user's requirements. [SC 1.4.5].
    For example, web content allows users to specify font, size, color, and background settings, and all images of text are then provided based on those settings.

Test Results

If any of the above checks fail, then Baseline Test 6.D-ImageText fail.

Advisory: Tips for streamlined test processes

  • None

WCAG 2.2 Techniques

The following sufficient techniques and/or common failures were considered when developing this test procedure for this baseline requirement:

All Baseline Tests for Web